<template>
	<!--编辑界面-->
	<el-dialog title="修改菜单" :visible.sync="dialogVisible" size="small" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="off">
		<el-form label-width="150px">
			<el-row :span="24">
				<el-col :span="12">
					<el-form-item label="中文名称">
						<el-input v-model="formData.menuname" size="small"></el-input>
					</el-form-item>
					<el-form-item label="英文名称">
						<el-input v-model="formData.menunameen" size="small"></el-input>
					</el-form-item>
					<el-form-item label="路由地址">
						<el-input v-model="formData.menuurl" size="small" :disabled="urlDisabled"></el-input>
					</el-form-item>
					<el-popover ref="popoverIcon" style="height:400px;overflow-y:auto" placement="right" width="400" trigger="click">
						<!-- <ul> -->
						<li v-for="item in iconOptions" @click="seleIcon(item.value)" :class="item.value" style="padding:10px"></li>
						<!-- </ul> -->
					</el-popover>
					<el-form-item v-if="!iconDisabled" label="图标">
						<el-button @click="iconClick" v-popover:popoverIcon>{{formData.icon}}</el-button>
					</el-form-item>
					<el-form-item label="类型">
						<el-select size="small" v-model="formData.isleaf" @change="handleChange()" :disabled="leafDisabled">
							<el-option v-for="item in leafOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="stdcode">
						<el-input size="small" v-model="formData.stdcode"></el-input>
					</el-form-item>
					<el-form-item label="orderid">
						<el-input size="small" v-model="formData.orderid"></el-input>
					</el-form-item>
					<el-form-item label="loadflag">
						<el-input v-model="formData.loadflag" size="small"></el-input>
					</el-form-item>
					<el-form-item label="target">
						<el-input size="small" v-model="formData.target"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="off">取 消</el-button>
			<el-button type="success" @click="edit">修 改</el-button>
		</span>
	</el-dialog>
</template>

<script>
import Icons from "../../js/production/icons";
export default {
	data() {
		return {
			dialogVisible: true,
			urlDisabled: false,
			iconDisabled: true,
			leafDisabled: false,
			formData: {
				menuid: '',
				menuname: '',
				menunameen: '',
				menuurl: '',
				stdcode: '',
				icon: '',
				target: '',
				isleaf: 0,
				orderid: 0,
				loadflag: 0,
			},
			leafOptions: [{
				label: '0-菜单项',
				value: 0
			}, {
				label: '1-菜单组',
				value: 1
			}
			],
			iconOptions: [],
		}
	},
	mounted() {
		this.iconOptions = Icons.values;
		this.formData.menuid = this.$parent.rowdata.menuid;
		this.formData.menuname = this.$parent.rowdata.menuname;
		this.formData.menunameen = this.$parent.rowdata.menunameen;
		this.formData.menuurl = this.$parent.rowdata.menuurl;
		this.formData.stdcode = this.$parent.rowdata.stdcode;
		this.formData.icon = this.$parent.rowdata.icon;
		this.formData.target = this.$parent.rowdata.target;
		this.formData.isleaf = this.$parent.rowdata.isleaf == '1' ? 1 : 0;
		this.formData.orderid = this.$parent.rowdata.orderid;
		this.formData.loadflag = this.$parent.rowdata.loadflag;

		if (this.formData.isleaf == 1) {
			this.urlDisabled = true;
			this.leafDisabled = true;
		}
		if (this.$parent.rowdata.fmenuid == 1) {
			this.iconDisabled = false;
		}
	},
	methods: {
		iconClick() {
			$(".el-popover").css("height", "400px");
			$(".el-popover").css("overflow-y", "auto");
		},
		seleIcon(icon) {
			this.formData.icon = icon;
		},
		handleChange() {
			if (this.formData.isleaf == 1) {
				this.formData.menuurl = '';
				this.urlDisabled = true;
				this.iconDisabled = false;
			} else {
				this.formData.icon = '';
				this.iconDisabled = true;
				this.urlDisabled = false;
			}
		},
		edit() {
			this.$confirm('此操作将永久修改菜单, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'error'
			}).then(() => {
				let vm = this;
				$.ajax({
					type: 'POST',
					url: "/soa/menu/edit",
					data: vm.formData,
					dataType: 'json',
					success: function (data) {
						vm.$parent.queryTree();
					}
				});
				vm.$parent.showEditDialog = false;
				vm.$message({
					type: 'success',
					message: '修改菜单成功!'
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消修改'
				})
			})
		},
		off() {
			this.$parent.showEditDialog = false;
		}
	}
}
</script>